<template>
      <div id="news">
            <bread-crumb>新闻资讯</bread-crumb>
            <div class="btn">
                  <el-button type="primary" @click="addNews">添加资讯</el-button>
            </div>
            <!-- 表格 -->
            <div class="table">
                  <el-table
                  :data="tableData"
                  height="600px"
                  style="width: 100%">
                  <el-table-column
                        label="日期"
                        width="180">
                        <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.addtime }}</span>
                        </template>
                  </el-table-column>
                  <el-table-column
                        label="资讯封面"
                        >
                        <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <img :src="scope.row.topic" class="fmpop" alt="">
                        <div slot="reference" class="name-wrapper">
                              <img :src="scope.row.topic" class="fm" alt="">
                        </div>
                        </el-popover>
                        </template>
                  </el-table-column>
                  <el-table-column
                        label="资讯标题"
                        >
                        <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p>{{ scope.row.title }}</p>
                        <div slot="reference" class="name-wrapper">
                              <div size="medium">{{ scope.row.title }}</div>
                        </div>
                        </el-popover>
                        </template>
                  </el-table-column>
                  <el-table-column
                        label="资讯摘要"
                        width="150px"
                        >
                        <template slot-scope="scope">
                        <!-- <el-popover trigger="hover" placement="top"> -->
                        <!-- <p>{{ scope.row.abstract }}</p> -->
                        <div slot="reference" class="name-wrapper">
                              <div class="abstract" size="medium">{{ scope.row.abstract }}</div>
                        </div>
                        <!-- </el-popover> -->
                        </template>
                  </el-table-column>
                  <el-table-column
                        label="资讯内容"
                        width="200px"
                        >
                        <template slot-scope="scope">
                        <!-- <el-popover trigger="hover" placement="top">
                         <div class="innerbox">
                               <p  v-html="scope.row.content"></p>
                         </div> -->
                        <div slot="reference" class="name-wrapper">
                              <div class="content">
                                    <p v-html="scope.row.content"></p>
                              </div>
                        </div>
                        <!-- </el-popover> -->
                        </template>
                  </el-table-column>
                  <el-table-column label="资讯状态">
                        <template slot-scope="scope">
                              <el-button
                              size="mini"
                              :type="scope.row.display == '1' ? 'danger' : 'success'"
                              @click="changeState(scope.row)">
                                    {{ scope.row.display == '1' ? '隐藏' : '显示'}}
                              </el-button>
                        </template>
                  </el-table-column>
                  <el-table-column label="操作">
                        <template slot-scope="scope">
                              <el-button
                              size="mini"
                              @click="handleEdit( scope.row )">编辑</el-button>
                        </template>
                  </el-table-column>
                  </el-table>
            </div>
            <!-- page -->
            <div class="page">
                  <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                  </el-pagination>
                 
            </div>
            <news-dialog :DialogData="DialogData" :formData="formData" @update="getNewsData"></news-dialog>
      </div>
</template>

<script>
      import BreadCrumb from "@/components/BreadCrumb"
      import NewsDialog from "@/components/NewsDialog"
      export default {
            components: {
                  BreadCrumb,
                  NewsDialog
            },
            data() {
                  return {
                        DialogData: {
                              show: false,
                              title: ""
                        },
                        formData: {},
                        tableData: [],
                        pageSize: 10,
                        total:0,
                        currentPage: 1,
                  }
            },
            computed: {
                  token() {
                        return localStorage.miniToken
                  },
                  allPage() {
                        return this.total
                  }
            },
           
            mounted () {
                  this.getNewsData();
            },
            methods: {
                  //  添加资讯
                  addNews() {
                        this.DialogData = {
                              show: true,
                              title: "添加资讯",
                              add:true,
                              edit: false
                        }
                        this.formData = {
                              title: "",
                              topic: "",
                              content: "",
                              abstract: "",
                              classify: "1",
                        }
                  },
                  // 获取所有资讯
                  async getNewsData( page ) {
                        let self = this 
                        let res = await this.$axios.post("/admin/index/messageshow", { token: this.token, page: page?page : 1 })
                        // console.log(res);
                        if (res.data.data) {
                              this.tableData = res.data.data.zixun
                              this.total = res.data.data.wei * this.pageSize
                              this.tableData.forEach(el => {
                                    if (el.content) {
                                          el.content = self.wordFormat(el.content)
                                    }
                              })
                        }
                        // console.log(this.tableData);
                        
                  },
                  // 页码改变
                  handleCurrentChange( page ) {
                        this.getNewsData( page )
                  },
                  // 资讯状态
                  async changeState( row ) {
                        let res = await this.$axios.post("/admin/index/messagedisplay", {
                              token: this.token,
                              id: row.id
                        })
                       // console.log(res);
                       let code = res.data.code 
                       if (code == 202) {
                             this.$message.success("更新成功")
                             this.getNewsData()
                       }
                        
                  },
                  // 过滤富文本
                  wordFormat( val ) {
                        let reg = /&lt;/gim
                        let reg2 = /&gt;/gim
                        let reg3 = /&amp;nbsp;/gim
                        let reg5 = /&quot;/gim
                        return val.replace(reg, '<').replace(reg2, ">").replace(reg3," ").replace(reg5,'"')
                  },
                  // 编辑资讯
                  handleEdit( row ) {
                        this.DialogData = {
                              show: true,
                              title: "编辑资讯",
                              add:false,
                              edit: true
                        }
                        this.formData = {
                              title: row.title,
                              topic: row.topic,
                              content: row.content,
                              abstract: row.abstract,
                              id: row.id,
                              classify: row.classify
                        }
                  }
            },
      }
</script>

<style lang="scss" scoped>
#news {
      width: 100%;
      // height: 100%;
      .btn {
            width: 100%;
            text-align: right;
            padding-right: 150px;
      }
      .table {
            // height: 700px;
            // overflow-y: scroll;
            .fm {
                  width: 102px;
                  height: 70px;
            }
            .fmpop {
                  max-width: 306px;
                  height: 210px;
            }
            .content {
                  width: 200px;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  text-overflow: ellipsis;
                  padding: 0 10px;
            }
            .abstract {
                  width: 150px;
                  padding: 0 10px;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  text-overflow: ellipsis;
            }
            .innerbox {
                  width: 300px;
                  height: 400px;
                  overflow: scroll;
            }
      }
      .page {
            text-align: right;
            margin: 20px 0;
      }
}


</style>



